<template>
  <div class="box_warp1">
    <div class="title">
      <div>
        <span v-for="i in 8" :key="i"></span>
      </div>
      <p>{{ lang.login_to_receive }}</p>
      <div>
        <span v-for="i in 8" :key="i"></span>
      </div>
    </div>
    <div class="box">
      <div
        v-for="(day, index) in daysData"
        :key="index"
        :class="['day', `day${index}`, `state${day.state}`]"
      >
        <div class="day_t">{{ lang.day }} {{ day.dayNumber }}</div>
        <div class="box_con">
          <NuxtImg
            class="bg"
            src="/images/activity/daily-checkin/guang.png"
            alt=""
          />
          <NuxtImg class="xz" :src="day.boxSrc" alt="" />
          <div v-if="day.multiplier" class="num">x{{ day.multiplier }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="btn_lq" v-click-move @click="handleClick">
    <div class="btn">
      <div>
        {{ lang.open_btn }}
        <NuxtImg src="/images/activity/daily-checkin/box-g.png" />
        <div class="img_fly">
          <NuxtImg
            src="/images/activity/daily-checkin/box-g.png"
            class="button_image"
            :style="{
              transition: 'transform 0.7s',
              transform: 'translate(0rem, 0rem) scale(1)',
            }"
          />
          <NuxtImg
            v-show="showGuang"
            class="guang"
            src="/images/activity/daily-checkin/guang.png"
            alt=""
          />
        </div>
        X{{ myNum }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/daily-checkin");

const emit = defineEmits(["changeResDialog"]);

const myNum = ref(2);
// 3 过期 2 已完成 0 未完成
const daysData = ref([
  {
    dayNumber: 1,
    state: 3, // 过期状态
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: null,
  },
  {
    dayNumber: 2,
    state: 3,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: null,
  },
  {
    dayNumber: 3,
    state: 3,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: null,
  },
  {
    dayNumber: 4,
    state: 3,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: null,
  },
  {
    dayNumber: 5,
    state: 2, // 已完成状态
    boxSrc: "/images/activity/daily-checkin/box-k.png",
    multiplier: "2",
  },
  {
    dayNumber: 6,
    state: 0, // 未完成状态
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
  {
    dayNumber: 7,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "5",
  },
  {
    dayNumber: 8,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
  {
    dayNumber: 9,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "2",
  },
  {
    dayNumber: 10,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "5",
  },
  {
    dayNumber: 11,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "3",
  },
  {
    dayNumber: 12,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
  {
    dayNumber: 13,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
  {
    dayNumber: 14,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "7",
  },
  {
    dayNumber: 15,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
  {
    dayNumber: 16,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
  {
    dayNumber: 17,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "5",
  },
  {
    dayNumber: 18,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
  {
    dayNumber: 19,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
  {
    dayNumber: 20,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "3",
  },
  {
    dayNumber: 21,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
  {
    dayNumber: 22,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
  {
    dayNumber: 23,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "2",
  },
  {
    dayNumber: 24,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
  {
    dayNumber: 25,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "5",
  },
  {
    dayNumber: 26,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
  {
    dayNumber: 27,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "3",
  },
  {
    dayNumber: 28,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
  {
    dayNumber: 29,
    state: 0,
    boxSrc: "/images/activity/daily-checkin/box-g.png",
    multiplier: "1",
  },
]);

const showGuang = ref(false);
const handleClick = () => {
  showGuang.value = true;
  setTimeout(() => {
    showGuang.value = false;
    emit("changeResDialog", true);
  }, 1000);
};
</script>

<style scoped lang="scss">
.box_warp1 {
  background: var(--theme-color4);
  padding: 0.32rem 0.25rem;
  border-radius: 0rem 0rem 0.3rem 0.3rem;
  position: relative;
  color: #fff;

  .title {
    font-size: 0.44rem;
    text-align: center;
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;

    div {
      display: flex;

      span {
        display: block;
        width: 0.05rem;
        height: 0.3rem;
        background: var(--theme-color7);
        border-radius: 0.16rem;
        margin-right: 0.1rem;
        transform: rotate(30deg);
      }

      &:nth-of-type(1) span {
        transform: rotate(-30deg);
      }
    }

    p {
      margin: 0 0.4rem;
    }
  }
  .box {
    height: 6rem;
    overflow-x: scroll;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;

    .day {
      height: 2.5rem;
      background: var(--theme-color4);
      border-radius: 0.2rem;
      border: 0.05rem solid var(--theme-color7);
      box-sizing: border-box;

      &.state3 {
        position: relative;

        &:before {
          content: "";
          width: 100%;
          height: 100%;
          background: var(--theme-neutral4);
          border-radius: 0.2rem;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 9;
        }
      }

      &.state2 {
        position: relative;

        &:before {
          content: "";
          width: 100%;
          height: 100%;
          background: var(--theme-neutral4);
          border-radius: 0.2rem;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 9;
        }

        &:after {
          content: "";
          width: 0.8rem;
          height: 0.8rem;
          background: url("/images/activity/daily-checkin/icon-gou.png")
            no-repeat center center;
          background-repeat: no-repeat;
          background-size: 100% 100% !important;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 11;
        }
      }

      .day_t {
        width: 100%;
        height: 0.6rem;
        background: linear-gradient(
          180deg,
          var(--theme-ts1-gradient1) 0%,
          var(--theme-ts1-gradient2) 100%
        );
        border-radius: 0.16rem 0.16rem 0rem 0rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.38rem;
        font-weight: 600;
      }

      .box_con {
        position: relative;
        height: calc(100% - 0.6rem);
        background: var(--theme-color4);
        border-radius: 0 0 0.2rem 0.2rem;
        display: flex;
        align-items: center;
        justify-content: center;

        .bg {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }

        .xz {
          width: 1.4rem;
          height: 1.25rem;
          position: relative;
          z-index: 2;
        }

        .num {
          font-size: 0.34rem;
          position: absolute;
          bottom: 0.2rem;
          right: 0.2rem;
        }
      }
    }
  }
}

.btn_lq {
  margin-top: 0.4rem;
  position: relative;
  display: flex;
  justify-content: center;
  color: #fff;

  .btn {
    width: 6rem;
    height: 1rem;
    background: linear-gradient(
      360deg,
      var(--theme-main-gradient1) 0%,
      var(--theme-main-gradient2) 81%
    );
    border-radius: 1rem;
    font-size: 0.44rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;

    div {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    img {
      width: 0.75rem;
      height: 0.75rem;
      margin: -0.1rem 0.1rem 0 0.2rem;
    }

    .img_fly {
      position: absolute;
      margin-left: 0.3rem;
      z-index: 12;

      .button_image {
        margin-left: 0.2rem;
      }

      img {
        position: absolute;
      }

      .guang {
        width: 6.2rem;
        height: 6.2rem;
        animation: breathing-rotate 3s infinite ease-in-out;
      }
    }
  }
}
@keyframes breathing-rotate {
  0% {
    transform: scale(1) rotate(0);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.5) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 0.7;
  }
}
</style>
